<script setup lang="ts">
import { ref } from 'vue'
import type { Column } from './def';

defineProps<{ 
  columns: Column[],
  datas: any[],
  editable?: boolean
}>()

</script>
<template>
  <div class="vue-table data-table">
    <div class="tool-bar"></div>
    <div class="content">
      <table frame="hsides" rules="rows">
        <colgroup>
          <col v-for="col of columns" :width="col.width" :class="{
            ['type-' + col.type]: true
          }" :style="{
            width: Number.isInteger(col.width) ? (col.width + 'px') : 'auto'
          }"/>
        </colgroup>
        <thead>
          <tr>
            <th v-for="col of columns" :class="{
              ['type-' + col.type]: true
            }" :style="{
              minWidth: Number.isInteger(col.minWidth) ? (col.minWidth + 'px') : Number.isInteger(col.width) ? (col.width + 'px') : ''
            }">{{ col.caption }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="row of datas">
            <td v-for="col of columns" :class="{
              ['type-' + col.type]: true
            }">
              <input v-if="col.type=='string'" type="text" :value="row[col.field]" />
              <span v-else>{{ row[col.field] }}</span>  
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<style scoped>
.vue-table.data-table {
  display: flex;
  flex-direction: column;
  text-align: left;

  .tool-bar {
    height: 44px;
    flex-shrink: 0;
  }
  .content {
    width: 100%;
    overflow-x: overlay;
  }

  table {
    width: 100%;
    border-color: #DDDDDD;
    col {
      &.type-string {}
    }
    tr th,
    tr td {
      height: 36px;
      overflow: hidden;
      white-space: nowrap;
      padding: 0;
    }
    tr th {
      padding: 0 12px;
    }
    thead {
      tr {
        th {
          &.type-string {
            /* text-align: left; */
          }
        }
      }
    }
    tbody {
      td {
        input {
          font-size: 16px;
          appearance: none;
          height: 100%;
          border: none;
          outline: none;
          min-width: 0 !important;
          width: 100%;
          max-width: calc(100% - 24px);
          white-space: nowrap;
          overflow: hidden !important;
          padding: 0 12px;
        }
      }
    }
  }
}
</style>
